<template>
  <div class="app-container" v-loading="loading">
    <el-card class="main">
      <h1>智能体</h1>
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd"
            >创建智能体</el-button
          >
        </el-form-item>

        <el-form-item label="" prop="nickName">
          <el-input
            placeholder="搜索智能体"
            clearable
            v-model="queryParams.nickName"
            class="input-with-select"
            size="small"
            @keyup.enter.native="getList"
          >
            <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
          </el-input>
        </el-form-item>
      </el-form>

      <div v-if="sysUserList.length > 0">
        <el-row :gutter="20">
          <el-col
            :xl="6"
            :lg="8"
            :sm="12"
            :xs="24"
            v-for="(item, index) of sysUserList"
            :key="index"
          >
            <item :item="item" @getList="getList" />
          </el-col>
        </el-row>
      </div>
      <el-empty :image-size="200" v-else />
    </el-card>
    <!--  底部  -->

    <detault-footer />
    <agents-dialog
      :open="open"
      :title="title"
      :models-list="modelsList"
      :templates-list="templatesList"
      @cancel="cancel"
      @getList="getList"
      ref="child"
    />
  </div>
</template>
<script>
import item from "./components/item";
import agentsDialog from "./components/agents-dialog";

import { modelList, templateList, agentsList } from "@/api/login";
export default {
  name: "Agents",
  data() {
    return {
      open: false,
      title: "",
      queryParams: {
        nickName: "",
      },
      loading: false,
      sysUserList: [],
      showSearch: true,
      modelsList: [],
      templatesList: [],
    };
  },
  components: {
    agentsDialog,
    item,
  },
  methods: {
    // 获取列表数据
    async getList() {
      try {
        this.loading = true;
        const { queryParams } = this;
        const { data } = await agentsList(queryParams.nickName);
        this.sysUserList = data || [];
      } catch (error) {
        console.error("获取智能体列表错误", error);
      } finally {
        this.loading = false;
      }
    },
    // 关闭弹窗
    cancel() {
      this.open = false;
      this.reset();
    },
    // 添加智能体
    async handleAdd() {
      try {
        const [models, templates] = await Promise.all([modelList(), templateList()]);
        this.modelsList = models.data || [];
        this.templatesList = templates.data || [];

        this.title = "创建智能体";
        this.reset();
        this.open = true;
      } catch (error) {
        console.error("获取模型错误", error);
      }
    },
    // 修改智能体
    handleEdit(item) {
      this.title = "编辑智能体";
      this.open = true;
    },
    // 表单初始化
    reset() {
      this.form = {};
      this.$refs.child.resetFormFun();
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.main {
  min-height: calc(100vh - 178px);
}
</style>
